<template>
	<view>
		<view style="height: 18upx;"></view>
		<view class="form-view">
			<view class="form-item">
				<view class="form-label required">账户名称</view>
				<view class="form-content">
					<input type="text" v-model="formData.name" placeholder="请输入" class="input-css" placeholder-class="plac-css" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label required">银行账号</view>
				<view class="form-content">
					<input type="number" v-model="formData.bankNumber" placeholder="请输入" class="input-css" placeholder-class="plac-css" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label required">开户支行</view>
				<view class="form-content">
					<input v-model="formData.bankBranch" placeholder="请输入账户银行及开户行详细信息" class="input-css"
						placeholder-class="plac-css" />
				</view>
			</view>
		</view>
		<FloatView>
			<FloatButton @click="onSubmit">提交</FloatButton>
		</FloatView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId: '',
				formData: {
					name: "",
					bankNumber: "",
					bankBranch: ""
				}
			}
		},
		onLoad(options) {
			this.detailId = options.detailId || ''
			if (this.detailId) {
				uni.setNavigationBarTitle({
					title: '修改银行账户'
				})
				this.getBankDetail()
			}
		},
		methods: {
			async onSubmit() {
				const showToast = uni.$util.showToast
				const regExp = uni.$util.regex
				if (!this.formData.name) return showToast('请输入账户名称')
				if (!this.formData.bankNumber) return showToast('请输入银行账号')
				if (!this.formData.bankBranch) return showToast('请输入开户支行')
				const request = this.detailId ? uni.$api.getBankUpdate : uni.$api.getBankAdd
				uni.$util.showLoading()
				const res = await request(this.formData).finally(uni.finally)
				uni.$util.openerEvent(this)
				await uni.$util.showSuccess()
				uni.navigateBack()
			},
			async getBankDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getBankDetail(this.detailId).finally(uni.finally)
				this.formData = res.data
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 40upx;
		padding-bottom: 12upx;

		.form-item {
			width: 100%;
			@extend .row-between;
			padding: 22upx 0;

			.form-label {
				font-size: 29rpx;
				font-weight: 400;
				color: #B8ACA3;
			}

			.required {
				&::after {
					content: "*";
					color: #FF442F;
					margin-left: 12upx;
				}
			}

			.form-content {
				width: calc(100% - 185upx);
				@extend .row-between;

				.input-css {
					flex: 1;
					font-size: 29rpx;
					font-weight: 400;
				}

				.plac-css {
					font-size: 29rpx;
					font-weight: 400;
					color: #B8ACA3;
				}
			}
		}

		.form-item+.form-item {
			border-top: 1px solid #E9E9F4;
		}
	}
</style>